<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JS/jQuery图片查看器viewer.js演示</title>
		<link rel="stylesheet" href="css/viewer.min.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/viewer-jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#sucaihuo {
				width: 700px;
				margin: 0 auto;
				font-size: 0;
			}
			
			#sucaihuo li {
				display: inline-block;
				width: 32%;
				margin-left: 1%;
				padding-top: 1%;
			}
			
			#sucaihuo li img {
				width: 100%;
			}
		</style>		
		<script>
			$(function() {
				$('#sucaihuo').viewer({
					url: 'data-original'
				});
			});
		</script>
	</head>

	<body>
		<ul id="sucaihuo">
			<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
			<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
			<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
			<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
			<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
			<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片5"></li>
		</ul>
	</body>

</html>